ElectronでDB(MySQL)に接続してみた

#MySQL

#Node.js

梶原裕

2016.05.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

好物はインフラとフロントエンドのかじわらゆたかです。
「Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点」を @IT に寄稿しました！｜ Developers.IOを見てて、これでDB(MySQL)に接続ってできたりするのかなと思い検証してみました。

環境構築

今回用いた環境は下記となります。

OS : OSX El Capitan (10.11.4)
Node.js 5.10.1
MySQL : 5.7.11

DB接続のライブラリの追加

今回はElectronの雛形として、electron-quick-startを用います。
Electronのオフィシャルサイトそのまんまですが、以下で導入が可能です。

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start

次に、ElectronではNode.jsのモジュールが使えますので、MySQLのNode.jsのクライアントを導入します。

$ npm install mysql --save

次に、画面のHTMLとロジックのJavasacriptを記載していきます。

index.html

    <button elc-js="ExecuteQUeryBtn">SELECT * FROM electronSample</button>
    <table border="" elc-js="SelectResultTbl">
        <thead>
            <tr>
                <th>message</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

まず、html側にMySQLへのQueryを実行するボタンとその結果を表示するTableを記載します。
至って普通のHTMLになります。

renderer.js

(function(){
    let clickEventName = 'click';
    let clickButtonEventHandler = function(){
        let mysql      = require('mysql');
        let connection = mysql.createConnection({
            host     : 'localhost',
            user     : 'root',
            password : '',
            database : 'sample'
        });
        connection.connect();

        connection.query('SELECT * FROM electronSample;', function(err, rows, fields) {
            if (err) throw err;
            if(rows.length > 0){
                let table = document.querySelectorAll('[elc-js=SelectResultTbl]')[0]
                let tableBody = table.querySelectorAll('tbody')[0];
                tableBody.innerHTML = '';
                tableBody.insertAdjacentHTML('beforeend','<tr><td>' + rows[0].message + '</td></tr>');
            }
        });

        connection.end();
    };
    document.querySelectorAll('[elc-js=ExecuteQUeryBtn]')[0].addEventListener(clickEventName, clickButtonEventHandler);
}());

ボタン押下の挙動を書いていくのですが、基本はWebでフロントエンドを実装する時と変わらないのですが、
electronの特徴としてNode.jsのモジュールを使うことができるため、
クリック押下時にMySQLのモジュールを用いてMySQLに対してSelect文を実行させることが可能です。
また、モジュールの読み込みはNode.jsで書く時と同様requireで行うことが可能です。
乱暴に言うならば、Webのフロントエンド内にNode.jsのコードを書くことが可能といった形になります。

テーブル作成とデータ挿入を実施

DROP TABLE IF EXISTS sample.electronSample CASCADE;
CREATE TABLE sample.electronSample (
    message  character varying(1000)
);
INSERT INTO sample.electronSample VALUES('MySQLからこんにちわ');

最後に、MySQL側にElectron側から呼び出すテーブルとそのデータを作っておきます。